<template>
  <h2>知识库</h2>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="如果">
      <el-input v-model="key" placeholder="症状" clearable />
    </el-form-item>
    <el-form-item label="那么">
      <el-input v-model="result" placeholder="结果" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">添加</el-button>
      <el-button type="info" @click="goUrl('daozhen')"> 返回导诊程序 </el-button>
    </el-form-item>
  </el-form>
  <div class="list">
    <div class="item" v-for="(item, index) in tableData" :key="index">
      如果<span>{{ item.key }}</span
      >，那么<span>{{ item.value }}</span
      >；
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onActivated } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const key = ref("");
const result = ref("");
const zhishiku = ref({});
const tableData = ref([]);
const goUrl = (name) => {
  router.push({ name: name });
};
onMounted(() => {
  let zsk = localStorage.getItem("zhishiku");
  if (zsk) {
    zhishiku.value = JSON.parse(zsk);
    tableData.value = Object.entries(zhishiku.value).map(([key, value]) => ({
      key,
      value,
    }));
  }
});
const onSubmit = () => {
  zhishiku.value[key.value] = result.value;
  localStorage.setItem("zhishiku", JSON.stringify(zhishiku.value));
  tableData.value = Object.entries(zhishiku.value).map(([key, value]) => ({
    key,
    value,
  }));
  key.value = "";
  result.value = "";
};
</script>
<style lang="scss" scoped>
.list {
  text-align: left;
  height:51vh;
  overflow-y: auto;
  .item {
    margin-top: 5px;
    > span {
      color: red;
      margin: 0 5px;
    }
  }
}
</style>
